<script setup>
import MyTable from "@/components/constant/myTable.vue";
import {addCommodity, delCommodity, getCommodityList, updateCommodity} from "@/api/httpApi/commodity.js";
import {getCommodityCategoryList} from "@/api/httpApi/commodityCategoryApi.js";
import {successCode} from "@/api/httpApi/base/http.js";
import {onMounted, ref, reactive} from "vue";
import {checkCaptchaCode} from "@/api/httpApi/userApi.js";
import {constantStore} from "@/stores/constantStore.js";
import {getProjectList} from "@/api/httpApi/projectApi.js";

/**
 * 初始化
 */
onMounted(() => {
  init();
})
let commodityCategoryList = ref({});
let commodityCategorySelectItem = ref([]);
let projectList = ref({});

let projectSelectItem = ref([]);
let commodityList = ref([]);

function init() {
  initProjectList();
  initCommodityCategoryList();
  initCommodityList();
}

//
function initProjectList() {
  getProjectList().then(res => {
    if (res.code === successCode) {
      projectList.value = res.data;
      projectSelectItem.value = []
      for (let i = 0; i < projectList.value.length; i++) {
        let item = projectList.value[i];
        projectSelectItem.value.push(
            {
              label: item.name,
              value: item.id
            })
      }
    }
  });
}

function initCommodityCategoryList() {
  getCommodityCategoryList(projectId.value).then(res => {
    if (res.code === successCode) {
      commodityCategoryList.value = res.data;
      commodityCategorySelectItem.value = [];
      for (let i = 0; i < commodityCategoryList.value.length; i++) {
        let item = commodityCategoryList.value[i];
        commodityCategorySelectItem.value.push(
            {
              label: item.name,
              value: item.id
            })
      }
    }
  });
  return commodityCategorySelectItem.value;
}

function initCommodityList() {
  getCommodityList(pageObj.value.currentPage, pageObj.value.pageSize, projectId.value, commodityCategoryId.value, commodityKey.value).then(res => {
    if (res.code === successCode) {
      constantStore().copyPage(pageObj, res.data);
      commodityList.value = res.data.content;
    }
  })
}

function changeProject(item) {
  let old = projectId.value;
  projectId.value = item;
  initCommodityCategoryList()
  projectId.value = old;

}


/**
 * 搜索相关
 */
let commodityCategoryId = ref("");
let projectId = ref("");
let commodityKey = ref("");

function search() {
  initCommodityList();
}

function clearSearch() {
  commodityCategoryId.value = "";
  projectId.value = "";
  commodityKey.value = "";
  initCommodityList();
}

function changeSelectCategory() {
  initCommodityCategoryList();
  initCommodityList();
}

function changeSelectProject() {
  commodityCategoryId.value = "";
  initCommodityCategoryList();
  initCommodityList();
}

function changeInput() {
  initCommodityList();
}

/**
 * 分页相关
 */
let pageObj = ref({
  currentPage: 1,
  pageSize: 10,
  totalPages: 10,
  totalCount: 1,
  first: false,
  last: false,
})

function handleSizeChange() {
  initCommodityList();
}

function handleCurrentChange() {
  initCommodityList();
}

const commodityMapping = ref([
  {
    label: "ID",
    prop: "id",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
  },
  {
    label: "商品名称",//表头名称 必填
    prop: "name",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      width: "180",
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editProp: "name",// 编辑框的数据字段名称  非必填 不写默认用prop
      required: true,//是否必传，默认false
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      rules: []//构建默认的校验规则
    }
  },
  {
    label: "商城名称",//表头名称 必填
    prop: "projectName",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      width: "180",
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editProp: "projectId",// 编辑框的数据字段名称  非必填 不写默认用prop
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      required: true,//是否必传，默认false
      option: projectSelectItem, //选择框内数据
      change: (item) => changeProject(item)
    }
  },
  {
    label: "商品类别",//表头名称 必填
    prop: "commodityCategoryName",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      width: "180",
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editProp: "commodityCategoryId",// 编辑框的数据字段名称  非必填 不写默认用prop
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      required: true,//是否必传，默认false
      option: commodityCategorySelectItem //选择框内数据
    }
  },
  {
    label: "描 述",
    prop: "description",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text"
    }
  },
  {
    label: "图片",
    prop: "image",
    propConfig: {
      align: "center",
      width: "200",
      type: "image",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "image", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      imageConfig: {
        shape: "square", // square circle
        radius: 0,
        size: "",//单位PX 有size配置，  width 和height 将会失效 且 shape等于circle，仅仅会生效此属性
        width: 300,//单位PX
        height: 300,//单位PX
        imgWidth: 180,//单位PX
        imgHeight: 180,//单位PX
        fit: "cover", //图片如何适应到容器框，同原生 object-fit。  'fill', 'contain', 'cover', 'none', 'scale-down',
        lazy: true,
        alt: "热门图标",
      },
      cropperConfig: {
        canScale: true,//图片是否允许滚轮缩放 默认true
        autoCrop: true,//是否默认生成截图框 默认false
        fixed: false,//是否开启截图框宽高固定比例 默认false
        fixedNumber: [1, 1],//截图框的宽高比例, 开启fixed生效 默认[1, 1]  ([ 宽度 , 高度 ])
        full: false,//是否输出原图比例的截图, 默认false
        canMove: true,//上传图片是否可以移动, 默认true
        canMoveBox: false,//截图框能否拖动, 默认true
        original: false,//上传图片按照原始比例渲染, 默认false
        centerBox: false,//截图框是否被限制在图片里面 默认false
        high: true,//是否按照设备的dpr输出等比例图片 默认true
        infoTrue: false,//true 为展示真实输出图片宽高 默认false 展示看到的截图框宽高
        fixedBox: true,//固定截图框大小, 不允许改变 默认false false
      },
    }
  },
  {
    label: "热门图标",
    prop: "iconImage",
    propConfig: {
      align: "center",
      width: "200",
      type: "image",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "image", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      imageConfig: {
        shape: "square", // square circle
        size: 80,
        alt: "热门图标",
      },
      cropperConfig: {canMoveBox: false},
    }
  },
  {
    label: "代码",
    prop: "code",
    propConfig: {
      align: "center",
      width: "700",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text",
      editTextType: "text",
    },
  },
  {
    label: "原价格",
    prop: "basePrice",
    propConfig: {
      align: "center",
      width: "120",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
    },
  },
  {
    label: "质量倍率(无则忽略)",
    prop: "multiplierUp",
    propConfig: {
      align: "center",
      width: "120",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
    },
  },
  {
    label: "等级倍率(无则忽略)",
    prop: "levelUp",
    propConfig: {
      align: "center",
      width: "120",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
    },
  },
  {
    label: "等级上限(无则忽略)",
    prop: "levelTop",
    propConfig: {
      align: "center",
      width: "120",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
    },
  },
  {
    label: "现价格",
    prop: "price",
    propConfig: {
      align: "center",
      width: "120",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
    },
  },
  {
    label: "折扣",
    prop: "discount",
    propConfig: {
      align: "center",
      width: "120",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
    },
  },
  {
    label: "状 态",
    prop: "delete",
    propConfig: {
      align: "center",
      width: "120",
      type: "tag",
      fixed: 'left',//固定列的位置
      stateMapping: [{type: "success", data: "0", msg: "上架"}, {type: "danger", data: "1", msg: "下架"}]
    },
    editHandle: "update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "80",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      option: [{label: "下架", value: "1"}, {label: "上架", value: "0"}] //选择框内数据
    },
  },
  {
    label: "是否热点",
    prop: "hot",
    propConfig: {
      align: "center",
      width: "120",
      type: "switch",
      modelAction: (val) => {  //选择按钮的切换函数
        return checkCaptchaCode(val)
      },
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      labelWidth: "100",
      option: constantStore().stateOption,//选择框选项
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "最近修改时间",
    prop: "updateTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "备 注",
    prop: "remarks",
    propConfig: {
      align: "center",
      width: "400",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      require: true,
    },
  }
])

</script>

<template>
  <div class="commodity-box" id="commodity-box">
    <div class="commodity-button">
    </div>
    <div class="commodity-content">
      <my-table :dataList="commodityList"
                @after-edit="initCommodityList"
                :update-action="(commodity) => { return updateCommodity(commodity)}"
                :add-action="(commodity) => { return addCommodity(commodity)}"
                :delAction="(ids) => { return delCommodity(ids)}"
                title="商城"
                :has-page="true"
                :mapping="commodityMapping">
        <template #buttonAdd>
          <div class="button-box-item">
            <el-input clearable v-model="commodityKey" placeholder="请输入搜索名称"
                      @keydown.enter="changeInput"></el-input>
          </div>
          <div class="button-box-item" style="width: 15rem">
            <el-select v-model="projectId" placeholder="请选择商城" clearable @change="changeSelectProject">
              <el-option v-for="(item,index) in projectSelectItem" :key="index"
                         :label="item.label" :value="String(item.value)"/>
            </el-select>
          </div>
          <div class="button-box-item" style="width: 15rem">
            <el-select v-model="commodityCategoryId" placeholder="请选择商品分类" clearable
                       @change="changeSelectCategory">
              <el-option v-for="(item,index) in commodityCategorySelectItem" :key="index"
                         :label="item.label" :value="String(item.value)"/>
            </el-select>
          </div>
          <div class="button-box-item">
            <el-button type="primary" @click="search">搜 索</el-button>
          </div>
          <div class="button-box-item">
            <el-button type="primary" @click="clearSearch">清 空</el-button>
          </div>
        </template>
        <template #page>
          <el-pagination
              v-model:current-page="pageObj.currentPage"
              v-model:page-size="pageObj.pageSize"
              :page-sizes="constantStore().pageSizes"
              :small="false"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageObj.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
        </template>
      </my-table>
    </div>
    <div class="commodity-footer">
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
